<template>
  <div>
    <div :style="{ height: '30px' }" />
    <!-- <a-table
      :columns="columns"
      :data-source="data"
      bordered
    /> -->
    <T2
      :columns="columns"
      :data-source="data"
      :showBackground="showBackground"
      :rowProps="defineRowProps"
      :cellProps="defineCellProps"
    />
    <input />
    <div :style="{ height: '20px' }" />
    <!-- <RuleTable
      ref="table1"
      type="simple"
      col="colFactors"
      row="rowFactors"
      auto="true"
    >
    </RuleTable> -->
    <button @click="doIt">doIt</button>
  </div>
</template>

<script>
import RuleTable from './RuleTable.vue'
import T2 from './T2.vue'

const highlightedCell = { row: 4, cell: 1 }
const highlightedBackgroundColor = '#ff6600'

export default {
  name: 'tableTest2',
  components: { RuleTable, T2 },
  data() {
    // const table1 = RuleTable.createRuleTable(this)
    // console.log('table 1 is:', table1)

    const colFactors = [
      {
        code: 'gender',
        label: '性别',
        isEnum: true,
        values: [
          { code: 1, label: '男' },
          { code: 2, label: '女' },
        ],
      },
      {
        code: 'age',
        label: '年龄',
        isEnum: false,
        values: [],
      },
    ]
    const rowFactors = []

    const highlighted = { row: 5, field: 0 }

    const customCell = ({ rowIndex, fieldIndex, ...rest } = {}) => {
      if (rowIndex === this.highlighted.row && fieldIndex === this.highlighted.field) {
        return {
          style: {
            'background-color': '#ff660030',
          },
        }
      }

      return {}
    }

    const columns = [
      {
        key: 'k1',
        title: 'title-a',
        dataIndex: 'a',
        // customCell,
        // customCell: (record, rowIndex) => {
        //   const fieldKey = 'k1'
        //   return this.customCell(record, rowIndex, fieldKey)
        // },
      },
      {
        key: 'k2',
        title: 'title-b',
        dataIndex: 'b',
        // customCell,
        // customCell: (record, rowIndex) => {
        //   const fieldKey = 'k2'
        //   return this.customCell(record, rowIndex, fieldKey)
        // },
      },
      {
        key: 'k3',
        title: 'title-c',
        dataIndex: 'c',
        // customCell,
        // customCell: (record, rowIndex) => {
        //   const fieldKey = 'k3'
        //   return this.customCell(record, rowIndex, fieldKey)
        // },
      },
    ]

    const data = [
      {
        key: 'row-1',
        a: 1,
        b: 2,
        c: 3,
      },
      {
        key: 'row-2',
        a: 11,
        b: 22,
        c: 33,
      },
      {
        key: 'row-3',
        a: 111,
        b: 222,
        c: 333,
      },
      {
        key: 'row-4',
        a: 111,
        b: 222,
        c: 333,
      },
      {
        key: 'row-5',
        a: 111,
        b: 222,
        c: 333,
      },
      {
        key: 'row-6',
        a: 111,
        b: 222,
        c: 333,
      },
      {
        key: 'row-7',
        a: 111,
        b: 222,
        c: 333,
      },
      {
        key: 'row-8',
        a: 111,
        b: 222,
        c: 333,
      },
    ]

    // const customRow = (record, rowIndex) => {
    //   const normalBackgroundColor = rowIndex % 2 === 0 ? '#ffffff' : '#fafafa'

    //   let style = {
    //     'background-color': rowIndex === highlightedCell.row ? highlightedBackgroundColor : normalBackgroundColor,
    //   }

    //   const click = (e) => {
    //     const { target } = e
    //     console.log('target is:', target)
    //   }

    //   return {
    //     style,
    //     on: {
    //       click,
    //     },
    //   }
    // }

    const defineRowProps = (record, rowIndex) => {
      return {
        style: {
          'background-color': '#ffffff',
        },
        on: {
          click(e) {
            const { target } = e
            // console.log('?? target is:', target)
            // console.log('row:', record, rowIndex)
            console.log('row on click...')
          },
        },
      }
    }

    const defineCellProps = ({ record, rowIndex, fieldIndex, fieldName, column } = {}) => {
      const style = {
        'background-color': '#ff330020',
      }

      return {
        style: fieldIndex == 2 && rowIndex == 3 ? style : undefined,
        on: {
          click(e) {
            const { target } = e
            // console.log('>> cell target is:', target)

            // console.log('cell:', record[fieldName], fieldName, fieldIndex)
            console.log('cell on click...')
          },
        },
      }
    }

    return {
      // table1,
      colFactors,
      rowFactors,
      highlighted,
      showBackground: false,
      defineRowProps,
      defineCellProps,
      // customRow,

      // table1,
      // table1: this.$refs.tableRef,
      // t2: this['$refs'],
      // t22: this['$refs']['tableRef'],
      // t3: this.$refs,
      columns,
      data,
      // customCell: (record, rowIndex, fieldKey) => {
      //   const fieldIndex = this.columns.findIndex((column) => column.key === fieldKey)
      //   let style = {}
      //   if (rowIndex === highlightedCell.row && fieldIndex === highlightedCell.cell) {
      //     style['background-color'] = '#ff660050'
      //   }

      //   return {
      //     style,
      //     on: {},
      //   }
      // },
      // customCell(record, rowIndex) {
      //   return {
      //     style: {
      //       'background-color': '#336699',
      //     },
      //     on: {},
      //   }
      // },
    }
  },
  props: {},
  methods: {
    doIt(a, b, c) {
      // console.log('a:', a, b, c)
      // console.log('now do it...')
      // this.$refs.tableRef.doSth()
      // const tableRef = this.$refs.tableRef
      // const { tableRef } = this.$refs
      // tableRef.doSth()
      // console.log('high:', this.highlighted)
      // this.highlighted.row++
      // this.data.push({ key: 'k11' })
      // this.colFactors.push({})
      // this.columns.push({
      //   customCell: () => {
      //     console.log('ss')
      //     return {}
      //   },
      // })
      // this.table1.doSth()

      this.showBackground = !this.showBackground
    },

    // customCell(record, rowIndex) {
    //   return {
    //     style: {
    //       'background-color': '#336699',
    //     },
    //     on: {},
    //   }
    // },

    // customCell(record, rowInde),
  },
}
</script>

<style></style>
